import React,{useState,useEffect} from 'react'
import { Button, Drawer, Form, Input } from 'antd';
import MyNotification from '../../components/MyNotification/MyNotification';
import { $add,$getOne,$update } from '../../api/roleApi'
export default function AddRole({open,setOpen,loadList,roleId,setRoleId}) {
    let [form]=Form.useForm()
    let [notiMsg,setNotiMsg]=useState({type:'',description:''})
    useEffect(()=>{
        
        if(roleId!=0){
            console.log(roleId)
            $getOne({roleId}).then((data)=>{
                form.setFieldsValue(data)
            })
        }
    },[roleId])
    const onClose = () => {
        clear()
        setRoleId(0)
        setOpen(false)
    }
    const onFinish = (values) => {
        console.log("==========================="+values)
        if(roleId){
            $update(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }else{
            $add(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    clear()
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }
      };
      const clear=()=>{
        form.resetFields();
      }
  return (
    <>
    <Drawer title={roleId!=0?"修改角色":"添加角色"} width={500} placement='right' onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    // initialValues={{
                    //     remember: true,
                    // }}
                    onFinish={onFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="角色编号"
                        name="roleId"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="角色名称"
                        name="roleName"
                        rules={[
                            {
                                required: true,
                                message: '请输入角色名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            {roleId?'修改':'添加'}
                        </Button>
                        <Button onClick={clear} style={{marginLeft:'10px'}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <MyNotification notiMsg={notiMsg}/>
    </>
  )
}
